<script setup lang="ts">
import { useExample } from "./hook";
const taskType = localStorage.getItem("taskType");
const { jump } = useExample();
</script>
<template>
  <div class="main-bg">

    <div class="main-bg-box" v-if="taskType == '1'">
      <div class="mian_top">
        <div class="main_icons" @click="jump('C')">
          <img src="@/assets/studen/images/index_icon_yh.png" />
        </div>
        <div class="main_icons" @click="jump('D')">
          <img src="@/assets/studen/images/index_icon_zq.png" />
        </div>
        <div class="main_icons" @click="jump('E')">
          <img src="@/assets/studen/images/index_icon_bx.png" />
        </div>
        <div class="main_icons" @click="jump('B')">
          <img src="@/assets/studen/images/index_icon_zx.png" />
        </div>
        <div class="main_icons" @click="jump('F')">
          <img src="@/assets/studen/images/index_icon_jg.png" />
        </div>
        <div class="main_icons" @click="jump('G')">
          <img src="@/assets/studen/images/index_icon_gyl.png" />
        </div>
      </div>
      <!-- <div class="mian_bottom">
        <div class="main_icons" @click="jump(687)">
          <img src="@/assets/studen/images/index_icon_python.png" />
        </div>
        <div class="main_icons" @click="jump(4)">
          <img src="@/assets/studen/images/index_icon_yhhx.png" />
        </div>
        <div class="main_icons" @click="jump(5)">
          <img src="@/assets/studen/images/index_icon_cl.png" />
        </div>
        <div class="main_icons" @click="jump(688)">
          <img src="@/assets/studen/images/index_icon_al.png" />
        </div>
      </div> -->
    </div>


    <div class="main-bg-box" v-else>
      <div class="mian_top mian_tops" style="top:5%;">
        <div class="main_icons" @click="jump('C')">
          <img src="@/assets/studen/images/index_icon_yh.png" />
        </div>
        <div class="main_icons" @click="jump('D')">
          <img src="@/assets/studen/images/index_icon_zq.png" />
        </div>
        <div class="main_icons" @click="jump('E')">
          <img src="@/assets/studen/images/index_icon_bx.png" />
        </div>
        <div class="main_icons" @click="jump('B')">
          <img src="@/assets/studen/images/index_icon_zx.png" />
        </div>
      </div>
      <div class="mian_bottom mian_bottoms" style="top:5%;width: 60%;">
        <div class="main_icons" @click="jump(5)">
          <img src="@/assets/studen/images/index_icon_cls.png" style="width: 110%;" />
        </div>
        <div class="main_icons" @click="jump('F')">
          <img src="@/assets/studen/images/index_icon_jg.png" />
        </div>
        <div class="main_icons" @click="jump('G')">
          <img src="@/assets/studen/images/index_icon_gyl.png" />
        </div>
      </div>
    </div>

  </div>
</template>
<style>
@import url("wow.js/css/libs/animate.css");
</style>
<style lang="scss" scoped>
.main-bg {
  width: 100%;
  height: 100%;
  background: url(@/assets/studen/images/nindex_bag.png) no-repeat;
  background-position: center;
  background-size: 100% 100%;
  padding-top: 80px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  .main-bg-box {
    width: 85%;
    height: 75%;
    background: url(@/assets/studen/images/index_bor_box.png) no-repeat;
    background-position: center;
    background-size: 100% 100%;

  }

  .mian_top {
    position: relative;
    top: 10%;
    width: 90%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .main_icons {

      img {
        transition: all 0.5s;
        width: 100%;
        height: 100%;
      }
    }
  }

  .mian_bottom {
    position: relative;
    top: 10%;
    width: 50%;
    margin: 0 auto;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .main_icons {
      img {
        transition: all 0.5s;
        width: 100%;
        height: 100%;
      }
    }
  }
}

.mian_bottom,
.mian_top {

  .main_icons {
    &:hover {
      cursor: pointer;

      img {
        transform: rotateY(360deg);
      }
    }
  }
}


// 实训
@media screen and (max-width: 1600px) {
  .main-bg .mian_top {
    top: 5%;
  }

  .main-bg .mian_bottom {
    top: 5%;
  }

  .main-bg .mian_tops,
  .main-bg .mian_bottoms {
    height: 220px;
  }

  .main-bg .mian_bottoms .main_icons,
  .main-bg .mian_tops .main_icons {
    margin-top: 0px;
    width: 202px;
    height: 220px;
  }
}
</style>
